import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:ycbl/config/bl_color.dart';
import 'package:ycbl/config/bl_style.dart';

import 'image.dart';

/// 登录输入框
class LoginTextField extends StatefulWidget {

  final TextEditingController controller;
  /// 提示文字
  final String hintText;
  /// 是否为密码样式，即是否显示 ... 如果一开始就是 false，那么密码按钮不可见
  final bool obscureText;
  /// 前置图标
  final Widget prefixIcon;
  /// 允许输入的格式
  final TextInputType inputType;

  const LoginTextField({
    Key key,
    @required this.controller,
    this.hintText,
    this.obscureText = false,
    this.prefixIcon,
    this.inputType,
  }) : super(key: key);

  @override
  _LoginTextFieldState createState() => _LoginTextFieldState();
}

/// 登录输入框
class _LoginTextFieldState extends State<LoginTextField> {

  /// 边框样式
  final _inputBorder = OutlineInputBorder(
    borderRadius:  BorderRadius.circular(40),
    borderSide: BorderSide.none,
  );

  final double _padding = 20;

  /// 默认遮挡密码
  ValueNotifier<bool> obscureNotifier;

  @override
  void initState() {
    obscureNotifier = ValueNotifier(widget.obscureText);
    super.initState();
  }

  @override
  void dispose() {
    obscureNotifier.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder(
      //监听密码是否可见
      valueListenable: obscureNotifier,
      builder: (context, obscure, child) => TextField(
        controller: widget.controller,
        maxLines: 1,
        style: BLStyle.commonBlackTextStyle,
        obscureText: obscure,
        keyboardType: widget.inputType,
        decoration: InputDecoration(
          //填充背景色，需要 filled 为 true
          fillColor: BLColor.commonBgColor,
          filled: true,
          hintText: widget.hintText,
          hintStyle: BLStyle.smallGreyTextStyle.copyWith(fontSize: BLStyle.commonTextSize),
          //边框样式
          focusedBorder: _inputBorder,
          enabledBorder: _inputBorder,
          contentPadding: EdgeInsets.all(0),
          //前置图标
          prefixIcon: Padding(
            padding: EdgeInsets.only(left: _padding, right: widget.prefixIcon == null ? 0 : 5),
            child: widget.prefixIcon,
          ),
          //默认宽高约束有点大，这里设置为 0，使用 Padding 解决边距
          prefixIconConstraints: BoxConstraints(minWidth: 0),
          //后置图标
          suffixIcon: Padding(
            padding: EdgeInsets.only(left: 5, right: _padding),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                //密码控件是否可见
                Offstage(
                  // offstage: true 隐藏, false 显示
                  offstage: !widget.obscureText,
                  child: ObscureWidget(controller: widget.controller, obscureNotifier: obscureNotifier),
                ),
                SizedBox(width: 5,),
                //清除按钮
                ClearTextFieldWidget(controller: widget.controller),
              ],
            ),
          ),

          suffixIconConstraints: BoxConstraints(minWidth: 0),
        ),
      ),
    );
  }
}

/// 控制隐藏、显示密码
class ObscureWidget extends StatelessWidget {

  final TextEditingController controller;
  final ValueNotifier<bool> obscureNotifier;

  const ObscureWidget({
    Key key,
    @required this.controller,
    @required this.obscureNotifier,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var theme = Theme.of(context);
    return InkWell(
      //根据密码是否可见，显示不同的 "眼睛"
      child: ValueListenableBuilder(
        valueListenable: obscureNotifier,
        builder: (_, obscure, __) => Icon(
          obscure ? CupertinoIcons.eye_solid : CupertinoIcons.eye ,
          size: 25,
          color: BLColor.commonGreyTextColor,
        ),
      ),
      onTap: (){
        //切换 密码是否可见
        obscureNotifier.value = !obscureNotifier.value;
      },
    );
  }
}

/// 清除输入框内容的控件
class ClearTextFieldWidget extends StatefulWidget {

  final TextEditingController controller;

  const ClearTextFieldWidget({Key key, @required this.controller}) : super(key: key);

  @override
  _ClearTextFieldWidgetState createState() => _ClearTextFieldWidgetState();
}

/// 清除输入框内容
class _ClearTextFieldWidgetState extends State<ClearTextFieldWidget> {

  //输入框内容是否为空的变化通知
  ValueNotifier<bool> textEmptyNotifier;

  @override
  void initState() {
    //初始化
    textEmptyNotifier = ValueNotifier(widget.controller.text.isEmpty);
    //添加内容变化监听
    widget.controller.addListener(() {
      textEmptyNotifier.value = widget.controller.text.isEmpty;
    });
    super.initState();
  }

  @override
  void dispose() {
    textEmptyNotifier.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    //根据是否有内容，来决定是否显示清除按钮
    return ValueListenableBuilder(
      valueListenable: textEmptyNotifier,
      builder: (context, bool isEmpty, child) => Offstage(
        offstage: isEmpty, // true 隐藏, false 显示
        child: child, // hold 住的 child
      ),

      // child 是不变的，可以 hold 住
      child: InkWell(
        child: LocalImage('ic_close_round.png', width: 20,),
        onTap: (){
          //清除输入框内容
          WidgetsBinding.instance.addPostFrameCallback((_) {
            widget.controller.clear();
          });
        },
      ),
    );
  }
}






